// 2022旧版版首页代码
view,
text {
  box-sizing: border-box;
}

page {
  background-color: #ffffff;
}

.page-box {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.page-box .cbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.page-box .cbox .tbanner {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-box .cbox .tbanner .img {
  width: 100%;
  height: 360rpx;
  z-index: 1;
  position: relative;
}

.page-box .cbox .tbanner .nav {
  top: 0;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FFFFFF;
  z-index: 2;
}

.page-box .cbox .cbox-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  flex: 1;
}

.page-box .cbox .cbox-scroll .scroll-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 40rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body {
  padding: 0 10rpx;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  top: 0rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 12rpx 6rpx rgba(0, 0, 0, 0.09);
  border-radius: 18rpx;
  display: flex;
  flex-direction: row;
  padding: 16rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .banner-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 0;
}

.page-box .cbox .cbox-scroll .scroll-content .banner-box .banner-img {
  width: 730rpx;
  height: 140rpx;
  display: block;
}

.page-box .cbox .cbox-scroll .scroll-content .body .blockHome {
  width: 100%;
  border-radius: 18rpx;
  display: flex;
  flex-direction: row;
  padding: 10rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox {
  position: relative;
  flex: 1;
  width: 100%;
  margin-right: 8rpx;
  background: #E9FAF2;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox .icon1 {
  position: absolute;
  width: 98rpx;
  height: 96rpx;
  bottom: 20rpx;
  z-index: 0;
  right: 14rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox .txt1 {
  position: relative;
  z-index: 1;
  font-size: 28rpx;
  color: #56C395;
  font-weight: bold;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox .txt2 {
  position: relative;
  z-index: 1;
  margin-top: 12rpx;
  font-size: 22rpx;
  color: #363938;
  font-weight: bold;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox .btn1 {
  position: relative;
  z-index: 1;
  width: 138rpx;
  height: 44rpx;
  background: #79CEA1;
  border-radius: 30rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  line-height: 44rpx;
  text-align: center;
  margin-top: 16rpx;
  margin-bottom: 70rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .wxbox:active {
  background: #e6f3eb;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox {
  position: relative;
  flex: 1;
  width: 100%;
  margin-left: 8rpx;
  display: flex;
  flex-direction: column;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox1 {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  background: #FDF9EA;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
  padding-left: 20rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox1 .txt1 {
  position: relative;
  z-index: 1;
  font-size: 28rpx;
  color: #FE9628;
  font-weight: bold;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox1 .icon1 {
  position: absolute;
  width: 68rpx;
  height: 90rpx;
  bottom: 0rpx;
  z-index: 0;
  right: 0rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox1 .txt2 {
  position: relative;
  z-index: 1;
  font-size: 22rpx;
  color: #363938;
  font-weight: bold;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox1:active {
  background: #f7f1dd;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox2 {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  background: #F0F8FF;
  border-radius: 12rpx;
  margin-top: 8rpx;
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
  padding-left: 20rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox2 .icon1 {
  position: absolute;
  width: 72rpx;
  height: 94rpx;
  bottom: 0rpx;
  z-index: 0;
  right: 0rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox2 .txt1 {
  position: relative;
  z-index: 1;
  font-size: 28rpx;
  color: #007BF0;
  font-weight: bold;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox2 .txt2 {
  position: relative;
  z-index: 1;
  font-size: 22rpx;
  color: #363938;
  font-weight: bold;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block1 .rbox .rbox2:active {
  background: #e9f1f8;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2 {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  border-radius: 18rpx;
  display: flex;
  flex-direction: row;
  padding: 28rpx 34rpx;
  display: flex;
  flex-direction: column;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2 .icon1 {
  position: absolute;
  width: 114rpx;
  height: 122rpx;
  bottom: 0;
  right: 0;
  z-index: 0;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2 .txt1 {
  z-index: 1;
  position: relative;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2 .txt2 {
  margin-top: 10rpx;
  z-index: 1;
  position: relative;
  font-size: 24rpx;
  color: #A19797;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2 .txt2 .redtxt {
  font-weight: bold;
  color: #EE6161;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2:active {
  background-color: #f4fffb;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block2:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border-radius: 36rpx;
  border: 2rpx solid #d8d8d8;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 {
  margin: 30rpx 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper {
  width: 100%;
  height: 146rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item {
  width: 100%;
  height: 100%;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item .menu-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item .menu-item .menu-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item .menu-item .menu-box .menu-icon {
  width: 44rpx;
  height: 44rpx;
  flex-shrink: 0;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item .menu-item .menu-box .menu-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #333333;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  word-break: break-all;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .menu-swiper .menu-swiper-item .menu-item .menu-box:active {
  opacity: 0.6;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .scrollbar {
  margin-top: 20rpx;
  position: relative;
  background-color: #e7e7e7;
  height: 8rpx;
  border-radius: 10rpx;
  width: 32rpx;
  overflow: hidden;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block3 .scrollbar .scroll-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 8rpx;
  width: 32rpx;
  border-radius: 10rpx;
  background-color: #64BF8F;
  transition: all 0.2s;
}



.page-box .cbox .cbox-scroll .scroll-content .body .block4 {
  margin-top: 60rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .mgr10 {
  margin-right: 10rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .mgl10 {
  margin-left: 10rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .scan-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 110rpx;
  border-radius: 16rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .scan-btn .icon1 {
  width: 48rpx;
  height: 48rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .scan-btn .txt1 {
  margin-left: 24rpx;
  font-size: 36rpx;
  color: #FFFFFF;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .green {
  background: #79CEA1;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .green:active {
  background: #71c598;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .blue {
  background: #5FA8FC;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block4 .blue:active {
  background: #5ba0f0;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block5 {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rpx 0rpx;
}

.page-box .cbox .cbox-scroll .scroll-content .body .block5 .copyright {
  font-size: 24rpx;
  color: #999999;
  line-height: 34rpx;
  word-break: break-all;
  margin-top: 60rpx;
}

.page-box .safe-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.page-box .tabbar {
  flex-shrink: 0;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
}

.page-box .tabbar .tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.page-box .tabbar .tabs .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.page-box .tabbar .tabs .tab-item .tab-icon {
  width: 44rpx;
  height: 44rpx;
}

.page-box .tabbar .tabs .tab-item .tab-name {
  margin-top: 8rpx;
  color: #BFBFBF;
  line-height: 32rpx;
  font-size: 24rpx;
}

.page-box .tabbar .tabs .tab-item .tab-active {
  color: #57D08F;
}

.justify-between {
  justify-content: space-around;
}

.align-center {
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

/* 提示框样式 start */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.close-wrap {
  position: absolute;
  right: 5rpx;
  top: -60rpx;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-a-center {
  align-items: center;
}

.flex-a-end {
  align-items: flex-end;
}

.flex-j-center {
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.mask .modal-header {
  justify-content: flex-end;
}

.mask .modal-header .header-right {
  width: 288rxp;
  height: 42rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mask-content {
  background-color: #fff;
  width: 75%;
  margin: 0 auto;
  border-radius: 30rpx;
  padding: 40rpx 28rpx;
  top: 600rpx;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  box-sizing: border-box;
  position: relative;
  font-size: 28rpx;
  color: #333;
  max-height: 85%;
  overflow-y: auto;
}

.modal-body-btm {
  background-color: #f9f9f9;
  line-height: 40rpx;
  font-size: 26rpx;
  color: #111;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}

.mask .mask-content-err {
  padding: 30rpx 0 40rpx 0;
}

.mask .mask-content-err .modal-body {
  padding: 40rpx 20rpx;
  margin: 30rpx;
}

.mask .mask-content-err .modal-body .wx-login-btn {
  border-radius: 42rpx;
  height: 86rpx;
  display: flex;
  flex-direction: column;
  width: 496rpx;
  background-color: #78D793;
  align-items: center;
}

.mask-close {
  height: 40rpx;
  width: 40rpx;
  padding: 10rpx;
  margin-bottom: -10rpx;
}

.mask-header image {
  height: 40rpx;
  width: 40rpx;
  margin-right: 20rpx;
}

.mask-content .mask-title {
  font-size: 32rpx;
  color: #000;
}

.mask-body {
  background-color: rgba(192, 244, 131, 0.3);
  border-radius: 10rpx;
  margin-top: 40rpx;
}

.modal-body image {
  width: 467rpx;
  height: 351rpx;
  margin-top: 30rpx;
}

.modal-body .text-c {
  display: block;
  width: 100%;
  text-align: center;
}

.modal-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  width: 100%;
  border-radius: 0 0 20rpx 20rpx;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.modal-footer .modal-btn-gray {
  background-color: #F8F8F8;
  color: #666;
  font-size: 34rpx;
  flex: 4;
}

.modal-footer .modal-btn-green {
  background: linear-gradient(to right, #3EEE8D, #23C76E, #1BBE65);
  font-size: 36rpx;
  color: #fff;
  flex: 4;
}

.modal-footer button {
  border: none;
  border-radius: 0;
}

.modal-footer .modal-btn-green image,
.modal-footer .modal-btn-gray image {
  width: 34rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.modal-footer .modal-btn-green text,
.modal-footer .modal-btn-gray text {
  font-size: 34rpx;
}

.fake-footer {
  display: flex;
  justify-content: center;
  height: 60rpx;
}

.footer-box {
  width: 496rpx;
}

/* 优化 */
.head-banner {
  margin: 14rpx 12rpx 0 14rpx;
}

/* .img-border-box {
    border: 1rpx solid #F1EEEE;
    border-radius: 8rpx;
} */
.head-banner .banner-img {
  width: 100%;
  border: 1rpx solid #F1EEEE;
  border-radius: 8rpx;
}



.block_5 {
  background-color: rgba(255, 255, 255, 1.000000);
  border-radius: 8rpx;
  width: 730rpx;
  height: 138rpx;
  border: 1px solid rgba(241, 238, 238, 1);
  flex-direction: row;
  display: flex;
  margin: 14rpx 0 0 12rpx;
}

.image-text_58 {
  width: 568rpx;
  height: 124rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 14rpx 0 0 26rpx;
}

.image-wrapper_2 {
  background-color: rgba(142, 182, 105, 1.000000);
  border-radius: 8rpx;
  height: 92rpx;
  margin-top: 6rpx;
  display: flex;
  flex-direction: column;
  width: 94rpx;
}

.label_1 {
  width: 74rpx;
  height: 58rpx;
  margin: 20rpx 0 0 10rpx;
}

.text-group_18 {
  width: 456rpx;
  height: 124rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-wrapper_4 {
  width: 380rpx;
  height: 54rpx;
  margin-left: 4rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

.text_7 {
  width: 102rpx;
  height: 40rpx;
  overflow-wrap: break-word;
  color: rgba(31, 31, 31, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
  margin-top: 14rpx;
}

.text_14 {
  width: 210rpx;
  height: 32rpx;
  overflow-wrap: break-word;
  color: rgba(255, 0, 0, 1);
  font-size: 22rpx;
  letter-spacing: 0rpx;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 32rpx;
}

.text_8 {
  width: 330rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 24rpx;
  letter-spacing: 0rpx;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  margin-top: 2rpx;
}

.text_15 {
  width: 306rpx;
  height: 32rpx;
  overflow-wrap: break-word;
  color: rgba(255, 0, 0, 1);
  font-size: 22rpx;
  letter-spacing: 0rpx;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 32rpx;
  margin: 2rpx 0 0 150rpx;
}

.button_1 {
  border-radius: 10rpx;
  height: 50rpx;
  border: 1px solid rgba(151, 151, 151, 0.28);
  display: flex;
  flex-direction: column;
  width: 124rpx;
  margin: 42rpx 24rpx 0 -12rpx;
}

.text_9 {
  width: 54rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(60, 60, 60, 1);
  font-size: 26rpx;
  letter-spacing: 0rpx;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 6rpx 0 0 36rpx;
}

.service-box {
  z-index: 3;
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
}

// 2023新版首页新增CSS代码
.safe-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.home2023 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;

  .click-view {
    opacity: 0.7;
  }

  .pbox {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    .tbox {
      position: relative;
      width: 100%;
      flex: 1;
      background-color: #52ce94;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .img1 {
        width: 146rpx;
        height: 275rpx;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
      }

      .img2 {
        width: 72rpx;
        height: 73rpx;
        display: block;
        position: absolute;
        right: 82rpx;
        bottom: 52rpx;
      }

      .ripple-btn {
        background-color: #fff;
        width: 400rpx;
        height: 400rpx;
        border-radius: 50%;
        position: relative;
        animation: ripple-btn 3s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon1 {
          position: absolute;
          display: block;
          width: 260rpx;
          height: 260rpx;
        }

        .icon2 {
          bottom: -50rpx;
          position: absolute;
          display: block;
          width: 150rpx;
          height: 150rpx;
        }

      }

      .ripple-btn:active {
        .icon1 {
          opacity: 0.7;
        }
      }

      .ripple-btn::before,
      .ripple-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        animation: inherit;
        animation-delay: 1s;
      }

      .ripple-btn::after {
        animation-delay: 1s;
      }

      @keyframes ripple-btn {
        0% {
          box-shadow: 0 0 0 16rpx rgba(255, 255, 255, 0.15);
        }

        100% {
          box-shadow: 0 0 0 80rpx rgba(255, 255, 255, 0);
        }
      }

      .lease-btn {
        background-color: #fff;
        width: 346rpx;
        height: 346rpx;
        border-radius: 50%;
        position: absolute;
        animation: lease-btn 3s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 100rpx;
        top: 100rpx;

        .icon1 {
          position: absolute;
          display: block;
          width: 260rpx;
          height: 260rpx;
        }

        .icon2 {
          bottom: -70rpx;
          position: absolute;
          display: block;
          width: 126rpx;
          height: 126rpx;
        }

      }

      .lease-btn:active {
        .icon1 {
          opacity: 0.7;
        }
      }

      .lease-btn::before,
      .lease-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        animation: inherit;
        animation-delay: 1s;
      }

      .lease-btn::after {
        animation-delay: 1s;
      }

      @keyframes lease-btn {
        0% {
          box-shadow: 0 0 0 12rpx rgba(255, 255, 255, 0.15);
        }

        100% {
          box-shadow: 0 0 0 60rpx rgba(255, 255, 255, 0);
        }
      }

      .return-btn {
        background-color: #fff;
        width: 230rpx;
        height: 230rpx;
        border-radius: 50%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 60rpx;
        bottom: 30rpx;
        border: 16rpx solid #4ba06e;

        .icon1 {
          position: absolute;
          display: block;
          width: 150rpx;
          height: 150rpx;
        }

        .icon2 {
          top: -60rpx;
          position: absolute;
          display: block;
          width: 80rpx;
          height: 80rpx;
        }
      }

      .return-btn:active {
        .icon1 {
          opacity: 0.7;
        }
      }

    }

    .fbox {
      width: 100%;
      flex-shrink: 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      position: relative;

      .img1 {
        width: 100%;
        height: 72rpx;
        display: block;
      }

      .gbox {
        padding: 0 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 100rpx;
        margin-bottom: 46rpx;

        .col1 {
          flex-shrink: 0;
          height: 414rpx;

          .btn1 {
            background: #FEF5EF;
            border-radius: 30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 10rpx;
            width: 274rpx;
            height: 394rpx;

            .icon1 {
              display: block;
              width: 226rpx;
              height: 224rpx;
            }

            .txt1 {
              margin-bottom: 26rpx;
              font-size: 36rpx;
              font-weight: bold;
              color: #353535;
              line-height: 34rpx;
            }
          }
        }

        .col2 {
          flex: 1;
          display: flex;
          flex-direction: column;
          height: 414rpx;

          .row1 {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 10rpx;
            margin-bottom: 10rpx;

            .btn2 {
              flex: 1;
              background: #EFF7FF;
              border-radius: 30rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin: 10rpx;
              height: 100%;

              .icon1 {
                margin-left: 20rpx;
                display: block;
                width: 115rpx;
                height: 104rpx;
              }

              .txt1 {
                margin-top: 10rpx;
                font-size: 36rpx;
                font-weight: bold;
                color: #353535;
                line-height: 34rpx;
              }
            }

            .btn3 {
              flex: 1;
              background: #EBFDF6;
              border-radius: 30rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin: 10rpx;
              height: 100%;

              .icon1 {
                margin-right: 10rpx;
                display: block;
                width: 115rpx;
                height: 104rpx;
              }

              .txt1 {
                margin-top: 10rpx;
                font-size: 36rpx;
                font-weight: bold;
                color: #353535;
                line-height: 34rpx;
              }
            }
          }

          .btn4 {
            flex: 1;
            background: #FFEBE6;
            border-radius: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 10rpx;
            height: 100%;

            .icon1 {
              display: block;
              width: 132rpx;
              height: 134rpx;
            }

            .txt1 {
              margin-left: 32rpx;
              font-size: 36rpx;
              font-weight: bold;
              color: #353535;
              line-height: 34rpx;
            }
          }
        }
      }
    }

    .float-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.23);
      border-radius: 14rpx;
      bottom: 500rpx;
      right: 30rpx;
      padding-top: 22rpx;
      padding-bottom: 10rpx;

      .mitem {
        padding: 0 22rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .micon {
          width: 64rpx;
          height: 64rpx;
        }

        .mtxt {
          margin-top: 4rpx;
          margin-bottom: 12rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #000000;
          line-height: 34rpx;
        }

        .mtag {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 12rpx;
          position: absolute;
          font-size: 18rpx;
          line-height: 32rpx;
          color: #FFFFFF;
          height: 32rpx;
          background: #FF3100;
          border-radius: 16rpx;
          top: -10rpx;
          right: -20rpx;
        }
      }
    }

  }

  .other-popup {
    display: flex;
    flex-direction: column;

    .other-menus {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 10rpx;
      margin-top: 130rpx;
      margin-bottom: 130rpx;

      .other-item:active {
        opacity: 0.7;
      }
      .other-item {
        margin: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 30rpx;
        width: calc((100% - 80rpx) / 4);
        height: 190rpx;

        .icon1 {
          width: 134rpx;
          height: 136rpx;
          display: block;
        }

        .txt1 {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
          line-height: 34rpx;
          margin-bottom: 20rpx;
        }
      }
    }

    .other-foot {
      .close-btn:active {
        opacity: 0.7;
      }
      .close-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;

        .icon1 {
          width: 100rpx;
          height: 100rpx;
          display: block;
        }

        .txt1 {
          margin-top: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #383838;
          line-height: 44rpx;
        }
      }
    }
  }

}